// 全局变量声明。！变量名，id名获+取到元素属性名,用驼峰。！函数名，动词和名词.在HTML设置自定义属性用作索引。在js设置索引量。一、用捕获到绑定事件子标签值，改索引。二、用索引改找到数组元素，改动画显示。
var index = 0,//页面图片索引
    menuItemIndex = 0,//侧边栏索引
    timeLength = 1000,//定时器，时间
    timer = null,//定时器
    preId = getId("pre"),//轮播图左边按钮id
    nextId = getId("next"),//轮播图右边按钮id
    dotsId = getId("dots"),//获取标签上级元素id
    mainId = getId("main"),//获取main标签id
    subMenuId = getId("subMenu"),//获取subMenuid
    bannerId = getId("banner"),//banner
    menuContentId = getId("menu-content"),//获取menuContent元素id
    bannerChildTag = getId("banner").getElementsByTagName("div"),//获取banner轮播盒子,获取到banner子tag标签
    dotsChildTag = getId("dots").getElementsByTagName("span"),//获取dots banner图上圆标签盒子,获取 banner图上圆标签
    menuContentChildTag = menuContentId.getElementsByTagName("div"),//mennuContent子标签
    subInnerBoxTag = subMenuId.getElementsByClassName("innerBox"),//获取subMenuId子标签
    mennuItem = menuContentId.getElementsByClassName("mennuItem"),//
    photoNum = bannerChildTag.length,//获取轮播图个数
    spanNum = dotsChildTag.length,//获取span轮播图标签个数
    menuNum = menuContentChildTag.length;//获取menuContent标签个数
// 函数名：getId
// 功能：用元素id名获取id。
// 入口参数：idName
function getId(idName) {
    return typeof (idName) === "string" ? document.getElementById(idName) : idName;//idName;对参数判断，字符串类型返回获取到id,否则返回原参数。
}
// 函数名：addHandle
// 功能：封装通用事件绑定方法
// 入口参数：element绑定事件的dom元素,type事件类型名，handle事件处理函数
function addHandle(element, type, handle) {
    // Chrome浏览器
    if (element.addEventListener) {
        element.addEventListener(type, handle, false);//true,chrome支持捕获事件绑定
        // IE支持dom2级事件绑定
    } else if (element.attachEvent) {
        element.attachEvent('on' + type, handle);//!element.attachEvent需要'on' + type
        // IE只支持dom0级事件绑定
    } else {
        element['on' + type] = handle;//!type为变量，不是真实事件，不能直接element.type
    }
}
// 函数名：changeImg
// 功能：切换轮播图
// 入口参数：空
function changeImg() {//自提取函数，尽量用全局变量
    for (let i = 0; i < photoNum; i++) {//！先清空所有再显示需要内容
        bannerChildTag[i].style.display = "none";
        dotsChildTag[i].className = "";
    }
    // 用索引改找到数组元素,改动画显示。
    bannerChildTag[index].style.display = "block";//！显示内容有两种方式，设置元素显示，设置元素类名。
    dotsChildTag[index].className = "active";
}
// 函数名：startAutoPLay
// 功能：启动定时器自动播放
// 入口参数：空
function startAutoPLay() {
    timer = setInterval(() => {
        index++;
        if (index >= photoNum) {
            index = 0;
        }
        changeImg();
    }, timeLength);
}
// 函数名：stopAutoPLay
// 功能：启动定时器自动播放
// 入口参数：空
function stopAutoPLay() {
    if (timer) {//！判空，清楚定时器前提为有定时器。删除操作需判空。
        clearInterval(timer);
    }
}
// 函数名：shawSubMenu
// 功能：显示二级菜单背景
// 入口参数：空
function shawSubMenu() {
    //绑定menuContent，滑过，显示subMenu
    subMenuId.style.display = "block";
    for (let i = 0; i < menuNum; i++) {
        subInnerBoxTag[i].style.display = "none";
        menuContentChildTag[i].style.background = "none";//！背景颜色突出选择
    }
    subInnerBoxTag[menuItemIndex].style.display = "block";
    menuContentChildTag[menuItemIndex].style.background = "rgba(0,0,0,0.1)";
}
// 函数名：noSubMenu
// 功能：隐藏二级菜单背景
// 入口参数：空
function noSubMenu() {
    subMenuId.style.display = "none";
    for (let i = 0; i < menuNum; i++) {
        subInnerBoxTag[i].style.display = "none";
    }
}
// 函数名：getTag
// 功能：捕获子标签
// 入口参数：element,type字符串,tagName字符串
function getTag(element,type,tagName) {
    addHandle(element,type, function (event) {
        // 用捕获到绑定事件子标签值
        var spanIndex = event.target.getAttribute(tagName);//!元素.getAttribute('属性名')获取属性名，用自定义属性名做索引.
        // if (spanIndex=="0") {
        //     console.log(spanIndex);
        // }else if(spanIndex=="1"){
        //     console.log(spanIndex);
        // }else if(spanIndex=="2"){
        //     console.log(spanIndex);
        // }
        // 改索引
        if (spanIndex) {
            index = spanIndex;
        }
    });
}
// 绑定点击事件，点击右边按钮翻下一页。
// 入口参数：轮播图右边按钮元素,按钮点击事件，点击右边按钮翻下一页
addHandle(nextId, "click", function () {//!参数"onclick",没有报错可能参数错误，有"",不用on字符
    index++;
    if (index >= photoNum) {
        index = 0;
    }
    // for (let i = 0; i < photoNum; i++) {//！先清空所有再显示需要内容
    //     bannerChildTag[i].style.display = "none";
    //     dotsChildTag[i].className = "";
    // }
    // bannerChildTag[index].style.display="block";//！显示内容有两种方式，设置元素显示，设置元素类名。
    // dotsChildTag[index].className = "active";
    changeImg();//！共同源代码，提取做函数。能减少耦合。
});
// 绑定点击事件，点击左边按钮翻上一页。
// 入口参数：轮播图左边按钮元素,按钮点击事件，点击左边按钮翻上一页
addHandle(preId, "click", function () {//!参数"onclick",没有报错可能参数错误
    index--;
    if (index < 0) {
        index = photoNum - 1;
    }
    // console.log(index);！先打印变量，看运行再写其他
    changeImg();
});
// 多个绑定事件，用事件委托。
// 入口参数：banner图上圆标签,按钮点击事件，点击标签翻指定页
addHandle(dotsId, "click", function (event) {
    // 用捕获到绑定事件子标签值
    var spanIndex = event.target.getAttribute("spanindex");//!元素.getAttribute('属性名')获取属性名，用自定义属性名做索引.
    // if (spanIndex=="0") {
    //     console.log(spanIndex);
    // }else if(spanIndex=="1"){
    //     console.log(spanIndex);
    // }else if(spanIndex=="2"){
    //     console.log(spanIndex);
    // }
    // 改索引
    if (spanIndex) {
        index = spanIndex;
    }
    changeImg();
});
//！获取绑定事件子标签值用遍历或者捕获，动画用函数。
//!mouseover不能多个绑定事件用事件委托,只能遍历索引
// 鼠标移过mennuItem展开二级菜单
for (let i = 0; i < menuNum; i++) {
    addHandle(menuContentChildTag[i], "mouseover", function () {
        var divIndex = this.getAttribute("divindex");//!this.getAttribute,this为tag
        menuItemIndex = divIndex; 
        shawSubMenu();
    });
}
//启动定时器自动播放
startAutoPLay();
// 鼠标移入main停止自动播放
// 入口参数：mainId,mouseover，stopAutoPLay
addHandle(mainId, "mouseover", function () {//!onmouseover,不写on。
    stopAutoPLay();
});
// 鼠标移出main开启自动播放
// 入口参数：mainId,mouseout,startAutoPLay()
addHandle(mainId, "mouseout", function () {
    startAutoPLay();
});

//鼠标划入子菜单，子菜单显示
addHandle(subMenuId,"mouseover",function() {//!优先级最高，只要在subMenuId就显示
    shawSubMenu();
});
//鼠标划出子菜单，子菜单隐藏
addHandle(subMenuId,"mouseout",function() {
    noSubMenu();
});
//鼠标划出大banner轮播图，子菜单隐藏
addHandle(bannerId, "mouseout", function () {//!因为优先级，需要对banner上面元素设置隐藏
    noSubMenu();
});
//鼠标划出子菜单，子菜单隐藏
addHandle(menuContentId, "mouseout", function () {
    noSubMenu();
});